<template>
    <el-dialog class="edit-password" title="申请vip" append-to-body :close-on-click-modal="closeOnclickModal"
               width="380px" :visible.sync="isDialogShow" @close="close">
        <div>
            <span>申请vip需支付99元，后台审核通过后即可享受优惠</span>
            <div style="font-size: 58px; color: #ff6257; text-align: center; margin-top: 18px"> <span style="font-size: 26px">￥</span>99</div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" :size="size">取消</el-button>
            <el-button type="primary" @click="submit" :size="size">支付</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {approveVip} from '@/api/user'
    export default {
      name: 'DialogVipPay',
      props: {
        dialogVipPayShow: {
          type: Boolean,
          default: false
        },
      },
      data() {
        return {
          isDialogShow: false
        }
      },
      watch: {
        dialogVipPayShow (newValue) {
          this.isDialogShow = newValue
        }
      },
      methods: {
        submit() {
          approveVip({}).then(res => {
            this.$message.success('支付成功，等待后台通过申请即可')
          })
        },
        close () {
          this.$emit('update:dialogVipPayShow', false)
        },
      }
    }
</script>
